<template>
  <div class="file">
    <div class="title-list">
      <el-tree :data="mainAside" :props="defaultProps" @node-click="handleNodeClick" highlight-current></el-tree>
    </div>
    <div class="list-con" @scroll="paperScroll">
      <!-- {{mainCon}} -->
      <div class="con-title">
        <div class="title">{{ mainCon.api_title }}</div>
        <div class="time">更新时间：2020-03-16 13:12:07</div>
      </div>
      <div class="con-info" id="title">
        <h1>{{ mainCon.api_title }}<router-link to="/debug" target="_blank" tag="a">在线调试</router-link></h1>
        <div class="info">{{ mainCon.description }}</div>
      </div>
      <div class="con-parameter">
        <!-- 公共请求参数 -->
        <div class="common_request_params cons" id="common_request_params">
          <h3 class="title">公共请求参数</h3>
          <div class="table">
            <el-table
              :data="mainCon.common_request_params"
              style="width: 100%;margin-bottom: 20px;"
              border
              row-key="name"
              default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="参数" min-width="3"> </el-table-column>
              <el-table-column prop="type" label="类型" min-width="2"> </el-table-column>
              <el-table-column prop="require" label="是否必填" min-width="2" :formatter="formatBoolean"> </el-table-column>
              <el-table-column prop="max_length" label="最大长度" min-width="2"> </el-table-column>
              <el-table-column prop="description" label="描述" min-width="9"> </el-table-column>
              <el-table-column prop="example" label="实例值" min-width="3"> </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 请求参数 -->
        <div class="request_params cons" id="request_params">
          <h3 class="title">请求参数</h3>
          <div class="table">
            <el-table
              :data="mainCon.request_params"
              style="width: 100%;margin-bottom: 20px;"
              border
              row-key="name"
              default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="参数" min-width="3"> </el-table-column>
              <el-table-column prop="type" label="类型" min-width="2"> </el-table-column>
              <el-table-column prop="require" label="是否必填" min-width="2"> </el-table-column>
              <el-table-column prop="max_length" label="最大长度" min-width="2"> </el-table-column>
              <el-table-column prop="description" label="描述" min-width="9"> </el-table-column>
              <el-table-column prop="example" label="实例值" min-width="3"> </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 公共响应参数 -->
        <div class="common_response_params cons" id="common_response_params">
          <h3 class="title">公共响应参数</h3>
          <div class="table">
            <el-table
              :data="mainCon.common_response_params"
              style="width: 100%;margin-bottom: 20px;"
              border
              row-key="name"
              default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="参数" min-width="3"> </el-table-column>
              <el-table-column prop="type" label="类型" min-width="2"> </el-table-column>
              <el-table-column prop="require" label="是否必填" min-width="2"> </el-table-column>
              <el-table-column prop="max_length" label="最大长度" min-width="2"> </el-table-column>
              <el-table-column prop="description" label="描述" min-width="9"> </el-table-column>
              <el-table-column prop="example" label="实例值" min-width="3"> </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 响应参数 -->
        <div class="response_params cons" id="response_params">
          <h3 class="title">响应参数</h3>
          <div class="table">
            <el-table
              :data="mainCon.response_params"
              style="width: 100%;margin-bottom: 20px;"
              border
              row-key="name"
              default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="参数" min-width="3"> </el-table-column>
              <el-table-column prop="type" label="类型" min-width="2"> </el-table-column>
              <el-table-column prop="require" label="是否必填" min-width="2"> </el-table-column>
              <el-table-column prop="max_length" label="最大长度" min-width="2"> </el-table-column>
              <el-table-column prop="description" label="描述" min-width="9"> </el-table-column>
              <el-table-column prop="example" label="实例值" min-width="3"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="request-parma cons" id="request-parma">
          <h3 class="title">请求实例</h3>
          <div class="table">
            <div class="case-navs">
              <div v-for="(item, i) in mainCon.api_examples" :key="i" :class="{ active: i == caseType }" @click="changeCaseType(i, item.value)">
                {{ item.title }}
              </div>
            </div>
            <mavon-editor
              v-model="value"
              defaultOpen="preview"
              :toolbarsFlag="false"
              :subfield="false"
              :boxShadow="false"
              :ishljs="true"
              previewBackground="#fff"
            />
          </div>
        </div>
        <div class="response-parma cons" id="response-parma">
          <h3 class="title">响应实例</h3>
          <div class="table">
            <div class="case-navs">
              <div
                v-for="(item, i) in mainCon.relevant_examples"
                :key="i"
                :class="{ active: i == responseCaseType }"
                @click="changeResponseCaseType(i, item.value)"
              >
                {{ item.title }}
              </div>
            </div>
            <mavon-editor
              v-model="valueResponse"
              defaultOpen="preview"
              :toolbarsFlag="false"
              :subfield="false"
              :boxShadow="false"
              :ishljs="true"
              previewBackground="#fff"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="right-aslide">
      <ul>
        <li v-for="(item, i) in idList" @click="goPosition(i, item.id, $event)" :key="i">
          <a href="javascript:void(0)" :class="{ active: i == index }">{{ item.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
export default {
  components: {},
  data() {
    return {
      valueResponse: '', //响应实例
      value: '', //请求示例
      mainAside: [], //左边侧边栏的内容
      subAside: [], //右边子侧边栏的内容
      mainCon: {}, //存储内容
      id: '', //保存当前的id用于查询内容
      defaultProps: {
        children: 'document_list',
        label: 'name'
      }, //使用树形控件的时候 label表示哪个字段是名称 children表示那个字段是子集
      thList: ['参数', '类型', '是否必填', '最大长度', '描述', '实例值'],
      idList: [
        {
          name: 'Api接口标题',
          id: '#title'
        },
        {
          name: '公共请求参数',
          id: '#common_request_params'
        },
        {
          name: '请求参数',
          id: '#request_params'
        },
        {
          name: '公共响应参数',
          id: '#common_response_params'
        },
        {
          name: '响应参数',
          id: '#response_params'
        },
        {
          name: '请求示例',
          id: '#request-parma'
        },
        {
          name: '响应实例',
          id: '#response-parma'
        }
      ], //锚链接保存的id列表
      index: null, //当前是那个高亮显示
      caseType: 0, //在线实列的类型,
      responseCaseType: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    id: {
      handler(newVal, oldVal) {
        console.log('new' + newVal, 'old' + oldVal)
        this.changeCon(newVal)
      }
    }
  },
  //方法集合
  methods: {
    //滚轮事件
    paperScroll(e) {
      // eslint-disable-next-line no-unused-vars
      var idx = null
      console.log(e.srcElement.scrollTop) //当前滚动的高度
      console.log($('#response_params').position().top)
      this.idList.forEach((item, i) => {
        // console.log($(`${item.id}`).position().top)
        var top = $(`${item.id}`).position().top
        if (top <= 0) {
          idx = i
          this.index = i
        }
        // console.log(idx)
      })
    },
    //属性控件自带的点击事件 在这个方法里面改变id
    handleNodeClick(data) {
      // console.log(data)
      if ('document_list' in data) {
        // console.log(data.document_list)
        var id = data.document_list[0].id
        // console.log(id)
        this.id = id
        return
      }
      this.id = data.id
    },
    //改变内容
    changeCon(id) {
      axios({
        url: '/web/document/document-detail?documentId=' + id,
        method: 'get'
      }).then(res => {
        // console.log(res.data)
        this.mainCon = res.data.data
        this.value = res.data.data.api_examples[0].value
        this.valueResponse = res.data.data.relevant_examples[0].value
      })
    },
    //判断是对象还是数组
    isObjArr(value) {
      if (Object.prototype.toString.call(value) === '[object Array]') {
        console.log('value是数组')
        return 1
      } else if (Object.prototype.toString.call(value) === '[object Object]') {
        console.log('value是对象')
        return 2
      } else {
        console.log('value不是数组也不是对象')
        return 0
      }
    },
    // 点击改变index
    goPosition(index, id, e) {
      this.index = index
      console.log(e)
      document.querySelector(id).scrollIntoView(true)
    },
    //通过布尔值显示 是与否
    formatBoolean(row, column, cellValue) {
      var ret = '' //你想在页面展示的值
      if (cellValue) {
        ret = '是' //根据自己的需求设定
      } else {
        ret = '否'
      }
      return ret
    },
    //改变实列类型
    changeCaseType(i, value) {
      this.caseType = i
      this.value = value
    },
    //改变响应实例
    changeResponseCaseType(i, value) {
      this.responseCaseType = i
      this.valueResponse = value
    }
  },
  created() {
    //用来请求左侧的导航列表
    axios({
      url: 'web/document/document-type-list?name=',
      method: 'get'
    }).then(res => {
      console.log(res.data)
      //赋值
      this.mainAside = res.data.data
      this.id = res.data.data[0].document_list[0].id
    })
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.file {
  position: fixed;
  width: 100%;
  display: flex;
  margin-top: 91px;
  height: 90vh;
  .title-list {
    width: 15%;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-left: 2%;
    padding-top: 1%;
    .el-tree {
      width: 100%;
      height: 100%;
      font-size: 18px;
      color: #000;
      /deep/.el-tree-node {
        padding-top: 2%;
      }
      /deep/ .el-tree-node__label {
        font-size: 18px;
      }
      /deep/.group {
        font-size: 14px;
      }
    }
  }
  .list-con {
    width: 60%;
    box-sizing: border-box;
    padding: 30px 50px;
    overflow-y: scroll;
    scroll-behavior: smooth;

    .con-title {
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
      margin-bottom: 30px;
      overflow: hidden;
      .title {
        font-size: 30px;
        margin-bottom: 6px;
        line-height: 1.5;
      }
      .time {
        font-size: 12px;
        color: #999;
      }
    }
    .con-info {
      h1 {
        font-size: 20px;
        margin-top: 40px;
        margin-bottom: 12px;
        a {
          color: #1890ff;
          text-decoration: none;
          background-color: transparent;
          outline: none;
          cursor: pointer;
          transition: color 0.3s;
          font-size: 14px;
          margin-left: 2px;
        }
      }
      .info {
        margin-bottom: 10px;
        color: #333;
        font-size: 14px;
        line-height: 2em;
      }
    }
    .con-parameter {
      .cons {
        h3 {
          font-size: 18px;
          margin: 30px 0 12px;
        }
        .table {
          width: 100%;
          overflow: hidden;
          /deep/.el-table {
            .cell {
              font-size: 12px;
              color: #333;
              text-align: left;
            }
            th {
              padding: 7px 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            td {
              padding: 7px 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .el-table__header {
              thead {
                color: #333;
                tr {
                  th {
                    background-color: #f7f7f7;
                    white-space: nowrap;
                    div {
                      font-weight: bold;
                      text-align: left;
                    }
                  }
                }
              }
            }
          }
          .case-navs {
            display: flex;
            align-items: center;
            div {
              width: 10%;
              display: flex;
              margin: 0.5%;
              align-items: center;
              justify-content: center;
              height: 40px;
              border-radius: 4px 4px 0 0;
              background: #fafafa;
              border: 1px solid #f5f5f5;
              cursor: pointer;
              color: #108ee9;
              background-color: #ddd;
            }
            div.active {
              background: #fff;
              border-color: #f5f5f5;
              border-bottom: none;
            }
          }
          .markdown-body {
            flex: 1;
            width: 100%;
            border: 1px solid #ddd;
          }
        }
      }
    }
  }
  .right-aslide {
    width: 25%;
    height: auto;
    padding-top: 2%;
    padding-left: 1%;
    ul {
      li {
        font-size: 14px;
        padding: 7px 0 7px 16px;
        line-height: 1.143;
        a {
          color: rgba(0, 0, 0, 0.65);
        }
        a.active {
          color: #1890ff;
        }
      }
    }
  }
  /deep/.el-tree {
    .is-current {
      .el-tree-node__label {
        color: #007aff;
      }
    }
  }
}
</style>
